<template>
  <div>
    <el-form label-width="100px" :model="skuForm">
      <el-form-item label="SPU名称"> {{ spu.spuName }} </el-form-item>

      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称"  v-model="skuForm.skuName"></el-input>
      </el-form-item>

      <el-form-item label="价格(元)">
        <el-input placeholder="价格(元)" v-model="skuForm.price"></el-input>
      </el-form-item>

      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" v-model="skuForm.weight"></el-input>
      </el-form-item>

      <el-form-item label="规格描述">
        <el-input placeholder="规格描述" type="textarea" rows="4" v-model="skuForm.skuDesc"></el-input>
      </el-form-item>

      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="100px">
          <el-form-item
            v-for="(attr, index) in attrList"
            :key="attr.id"
            :label="attr.attrName"
          >
            <el-select v-model="attr.attrIdValueId" placeholder="请选择">
              <el-option
                v-for="(attrValue, index) in attr.attrValueList"
                :key="attrValue.id"
                :label="attrValue.valueName"
                :value="`${attr.id}:${attrValue.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item
            :label="spuSaleAttr.saleAttrName"
            v-for="(spuSaleAttr, index) in spuSaleAttrList"
            :key="spuSaleAttr.id"
          >
            <el-select v-model="spuSaleAttr.spuSaleAttrIdValueId" placeholder="请选择">
              <el-option
                v-for="(
                  spuSaleAttrValue, index
                ) in spuSaleAttr.spuSaleAttrValueList"
                :key="spuSaleAttrValue.id"
                :label="spuSaleAttrValue.saleAttrValueName"
                :value="`${spuSaleAttr.id}:${spuSaleAttrValue.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table border style="width: 100%" :data="spuImageList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="prop" label="图片" width="width">
            <template slot-scope="{ row, $index }">
              <img :src="row.imgUrl" alt="" style="width: 80px; height: 85px" />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-button v-if="row.isDefault === '0'" type="primary" size="mini" @click="changeDefault(row,spuImageList)">设为默认</el-button>
              <el-tag v-else type="success">默认</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SkuForm",
  props: ["visible"],
  data() {
    return {
      spu: {},
      attrList: [],
      spuSaleAttrList: [],
      spuImageList: [],
      skuImageList: [],
      skuForm: {
        // 父组件传递的
        category3Id: 0,
        tmId: 0,
        spuId: 0,
        // createTime: "2021-05-06T11:41:08.406Z",
        // id: 0,
        // isSale: 0,
        // v-model收集的
        price: '',
        skuName: '',
        skuDesc: '',
        weight: '',
        // 通过自己写代码收集的
        skuDefaultImg: '',
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   attrName: "string",
          //   id: 0,
          //   skuId: 0,
          //   valueId: 0,
          //   valueName: "string",
          // },
        ],
        skuImageList: [
          // {
          //   id: 0,
          //   imgName: "string",
          //   imgUrl: "string",
          //   isDefault: "string",
          //   skuId: 0,
          //   spuImgId: 0,
          // },
        ],
        skuSaleAttrValueList: [
          // {
          //   id: 0,
          //   saleAttrId: 0,
          //   saleAttrName: "string",
          //   saleAttrValueId: 0,
          //   saleAttrValueName: "string",
          //   skuId: 0,
          //   spuId: 0,
          // },
        ],
      },
    };
  },
  mounted() {
    // console.log(this.spu);
    // console.log(this.attrList);
  },
  methods: {
    async getInitAddSkuFormData(row, category1Id, category2Id) {
      this.spu = row;
      // http://localhost:9529/dev-api/admin/product/attrInfoList/2/13/61
      let promise1 = this.$API.attr.getList(
        category1Id,
        category2Id,
        row.category3Id
      );
      // http://localhost:9529/dev-api/admin/product/spuSaleAttrList/4
      let promise2 = this.$API.sku.getSpuSaleAttrList(row.id);
      // http://localhost:9529/dev-api/admin/product/spuImageList/4
      let promise3 = this.$API.sku.getSpuImageList(row.id);

      const result = await Promise.all([promise1, promise2, promise3]);
      this.attrList = result[0].data;
      this.spuSaleAttrList = result[1].data;
      let spuImageList = result[2].data;
      spuImageList.forEach(item => item.isDefault = '0')
      this.spuImageList = spuImageList
    },
    // 点击收集图片信息
    handleSelectionChange(val){
      this.skuImageList = val
    },
    //点击切换默认 
    changeDefault(row,spuImageList){
      spuImageList.forEach(item => item.isDefault = '0')
      row.isDefault = '1'
      // 收集默认图片的路径
      this.skuForm.skuDefaultImg = row.imgUrl
    },
    // 清空data中所有的数据
    resetData(){
      Object.assign(this._data,this.$options.data())
    },
    // 点击保存
    async save(){
      // 1.获取参数数据
      let {spu,attrList,spuSaleAttrList,spuImageList,skuImageList,skuForm} = this
      // 2.整理参数
      // 获取父组件传过来的数据
      skuForm.category3Id = spu.category3Id
      skuForm.tmId = spu.tmId
      skuForm.spuId = spu.spuId
      // 整理图片参数
      // 需要的
      // {
      //   imgName: "string",
      //   imgUrl: "string",
      //   isDefault: "string",
      //   spuImgId: 0,
      // },
      // 现在的
      // id:24 
      // imgName:"ee11befc0d6dfa18.jpg"
      // imgUrl:"http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-skleASDLsAAFcVo0uNCs962.jpg"
      // isDefault:"0"
      // spuId:4  
      skuForm.skuImageList = skuImageList.map((item)=>{
        return {
          imgName:item.imgName,
          imgUrl:item.imgUrl,
          isDefault:item.isDefault,
          spuImgId:item.id
        }
      })
      // 整理平台属性值列表和销售属性值列表
      skuForm.skuSaleAttrValueList = attrList.reduce((prev,item) => {
        if (attrList.attrIdValueId) {
          let [attrId,valueId] = attrList.attrIdValueId.split(':')
          let obj = {
            attrId,
            valueId
          }
          prev.push(obj)
        }
        return prev
      },[])
      
      skuForm.skuSaleAttrValueList = spuSaleAttrList.reduce((prev,item)=>{
        if (item.spuSaleAttrIdValueId) {
          let [saleAttrId,saleAttrValueId] = item.spuSaleAttrIdValueId.split(':')
          let obj = {
            saleAttrId,
            saleAttrValueId
          }
          prev.push(obj)
        }
        return prev
      },[])
      
      // 3.发请求
      try {
          const result = await this.$API.sku.addUpdate(skuForm)
          if (result.code === 200 || result.code === 20000) {
          // 4.成功干啥
          this.$message.success('保存sku成功')
          // 回到列表页
          this.$emit('update:visible', false)
          // 清空sku页面数据
          this.resetData()
        }else(
          this.$message.error('保存sku失败')
        )
        } catch (error) {
          // 5.失败干啥
          this.$message.error('请求保存sku失败')
        }
    },
    cancel(){
      this.$emit('update:visible', false)
      // 清空sku页面数据
      this.resetData()
    }
  },
};
</script>

